import { ipcRenderer } from 'electron'
export default {
  data () {
    return {
      init: {
        // width: 1132.8,
        // height: 648
        width: 883.59,
        height: 619.18
      },
      moveCount: 1,
      canvas: null,
      doDrawing: false,
      lineSize: 3,
      mouseFrom: {
        x: 0,
        y: 0,
      },
      mouseTo: {
        x: 0,
        y: 0
      },
      canvasTo: {
        x: 0,
        y: 0
      },
      zoom: 1,
      isShowCanvas: false,
      // 当前图形对象
      drawObj: {
        type: null,
        param: null
      }
    }
  },
  methods: {
    addLine () {
      console.log('this.canvas: ', this.canvas)
      // this.canvas.set('color', this.color)
      // this.canvas.freeDrawingBrush.color = this.color
      // this.canvas.freeDrawingBrush.width = 3
      // this.canvas.isDrawingMode = true;

      // 选择任何工具前进行一些重置工作
      // 禁用画笔模式
      // this.canvas.isDrawingMode = false;
      // 禁止图形选择编辑
      this.disSelectAll()

      // 设置绘画模式画笔类型为 铅笔类型
      this.canvas.freeDrawingBrush = new fabric.PencilBrush(this.canvas);
      // 设置画布模式为绘画模式
      this.canvas.isDrawingMode = true;
      // 设置绘画模式 画笔颜色与画笔线条大小
      this.canvas.freeDrawingBrush.color = this.color;
      this.canvas.freeDrawingBrush.width = parseInt(this.lineWidth, 10);

    },
    // 画三角形 (等边三角形)
    addTriangle (isFill) {
      // let rect = new fabric.Triangle({
      //   top: 100,
      //   left: 100,
      //   width: 60,
      //   height: 120,
      //   fill: 'transparent', // 充
      //   stroke: this.color, // 边框
      //   strokeWidth: 2,
      //   strokeUniform: true
      // });
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let height = 50;
      let point = this.transformPoint(80, 100)
      let triangleObj = new fabric.Triangle({
        top: point.y,
        left: point.x,
        width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)),
        height: height,
        stroke: this.color,
        strokeWidth: 2,
        fill: fillColor
      });
      this.canvas.add(triangleObj);
    },
    // 画直角
    addRightAngle (isFill) {
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(80, 100)
      // let canvas = new fabric.Canvas('canvas');
      let path = new fabric.Path('M 0 0 L 0 100 L 75 100 z');
      path.set({
        top: point.y, //距离画布上边的距离
        left: point.x, //距离画布左侧的距离，单位是像素
        fill: fillColor, //填充的颜色
        stroke: this.color, // 边框
        strokeWidth: 2 // 边框大小
      });
      this.canvas.add(path);
    },
    // 画圆
    addCircle (isFill) {

      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(80, 100)
      let circle = new fabric.Circle({
        top: point.y, //距离画布上边的距离
        left: point.x, //距离画布左侧的距离，单位是像素
        radius: 50, //圆形半径
        fill: fillColor, //填充的颜色
        stroke: this.color, // 边框颜色
        strokeWidth: 2 // 边框大小
      });
      this.canvas.add(circle);
    },

    // 画正方形
    addRect (isFill) {
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(100, 100)
      let rect = new fabric.Rect({
        top: point.y, //距离画布上边的距离
        left: point.x, //距离画布左侧的距离，单位是像素
        width: 60, //矩形的宽度
        height: 60, //矩形的高度
        fill: fillColor, //填充的颜色
        stroke: this.color, // 边框原色
        strokeWidth: 2, // 边框大小
        // rx: 8, //圆角半径
        // ry: 4 //圆角半径
      });
      this.canvas.add(rect);
    },

    // 画长方形
    addRectAngle (isFill) {
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(100, 100)
      let rect = new fabric.Rect({
        top: point.y, //距离画布上边的距离
        left: point.x, //距离画布左侧的距离，单位是像素
        width: 100, //矩形的宽度
        height: 50, //矩形的高度
        fill: fillColor, //填充的颜色
        stroke: this.color, // 边框原色
        strokeWidth: 2, // 边框大小
        // rx: 8, //圆角半径
        // ry: 4 //圆角半径
      });
      this.canvas.add(rect);
    },

    // 五边形
    addFiveSide (isFill) {
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(120, 120)
      let path = new fabric.Path('M 100 0 L 195 69 L 159 181 L 41 181 L 5 69 z');
      path.set({
        top: point.y,
        left: point.x,
        fill: fillColor, //填充的颜色
        stroke: this.color, // 边框
        strokeWidth: 6, // 边框大小
      }).scale(0.28);
      // path.set({ left: point.x, top: point.y });
      this.canvas.add(path);

      // let canvas = new fabric.Canvas('canvas');
      // let path = new fabric.Path('M 100 0 L 160 180 L 10 60 L 190 60 L 40 180 z');
      // path.set({
      //   top : 80, //距离画布上边的距离
      //   left : 50, //距离画布左侧的距离，单位是像素
      //   fill : 'transparent', //填充的颜色
      //   stroke: this.color, // 边框
      //   strokeWidth: 2 // 边框大小
      // });
      // this.canvas.add(path);
      // point1(100,0),point2(195,69),point3(159,181),point4(41,181),point5(5,69)
      // let path = new fabric.Path('M 170.000 210.000 L 217.023 234.721 L 208.042 182.361 L 246.085 145.279 L 193.511 137.639 L 170.000 90.000 L 146.489 137.639 L 93.915 145.279 L 131.958 182.361 L 122.977 234.721 L 170.000 210.000');
      // path.set({
      //   top: 80, //距离画布上边的距离
      //   left: 50, //距离画布左侧的距离，单位是像素
      //   fill: 'transparent', //填充的颜色
      //   stroke: this.color, // 边框
      //   strokeWidth: 2 // 边框大小
      // });
      // path.set({ left: 120, top: 120 });
      // this.canvas.add(path);
    },
    // 椭圆
    addEllipse (isFill) {
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(150, 100)
      let canvasObject = new fabric.Ellipse({
        left: point.x,
        top: point.y,
        stroke: this.color,
        fill: fillColor,
        originX: "center",
        originY: "center",
        rx: 70,
        ry: 40,
        strokeWidth: 2
      });
      this.canvas.add(canvasObject);
    },

    // 画四边形
    addQuadrilateral (isFill) {
      // let rect = new fabric.Rect({
      //   top: 50, //距离画布上边的距离
      //   left: 150, //距离画布左侧的距离，单位是像素
      //   width: 100, //矩形的宽度
      //   height: 200, //矩形的高度
      //   fill: 'transparent', //填充的颜色
      //   stroke: this.color, // 边框原色
      //   strokeWidth: 5, // 边框大小
      //   rx: 50, //圆角半径
      //   ry: 50 //圆角半径
      // });
      // this.canvas.add(rect);
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(250, 150)
      let quad = new fabric.Polygon([
        { x: 0, y: 0 },
        { x: 50, y: 0 },
        { x: 75, y: 25 },
        { x: 25, y: 25 },
      ], {
        left: point.x,
        top: point.y,
        // angle: 0,
        stroke: this.color, // 边框原色
        strokeWidth: 2, // 边框大小
        fill: fillColor
      }
      );
      this.canvas.add(quad);
    },

    // 画等腰梯形
    addIsoTrapezoid (isFill) {
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(250, 150)
      let quad = new fabric.Polygon([
        { x: 25, y: 0 },
        { x: 50, y: 0 },
        { x: 75, y: 25 },
        { x: 0, y: 25 },
      ], {
        left: point.x,
        top: point.y,
        // angle: 0,
        stroke: this.color, // 边框原色
        strokeWidth: 2, // 边框大小
        fill: fillColor
      }
      );
      this.canvas.add(quad);
    },

    // 画直角梯形
    addRightTrapezoid (isFill) {
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(250, 150)
      let quad = new fabric.Polygon([
        { x: 0, y: 0 },
        { x: 30, y: 0 },
        { x: 60, y: 25 },
        { x: 0, y: 25 },
      ], {
        left: point.x,
        top: point.y,
        // angle: 0,
        stroke: this.color, // 边框原色
        strokeWidth: 2, // 边框大小
        fill: fillColor
      }
      );
      this.canvas.add(quad);
    },

    // 画五角星
    addPentagon (isFill) {
      let svgUrl = 'pentagon'
      if (isFill) {
        svgUrl = 'pentagon2'
      }
      fabric.loadSVGFromURL(require(`../assets/svg/${svgUrl}.svg`), (objects, options) => {
        let drink = fabric.util.groupSVGElements(objects, options);
        let point = this.transformPoint(60, 160)
        drink.set({
          left: point.x,
          top: point.y,
          fill: this.color,
          scaleY: 0.05,
          scaleX: 0.05
          // stroke: this.color,
          // strokeWidth: 2 // 边框大小
          // width: 32, 
          // height: 32 
        });
        this.canvas.add(drink);
        this.canvas.calcOffset();
        this.canvas.renderAll();
      })
    },
    // 画心
    addHeart (isFill) {
      let svgUrl = 'heart'
      if (isFill) {
        svgUrl = 'heart2'
      }
      fabric.loadSVGFromURL(require(`../assets/svg/${svgUrl}.svg`), (objects, options) => {
        let drink = fabric.util.groupSVGElements(objects, options);
        let point = this.transformPoint(60, 160)
        drink.set({
          left: point.x,
          top: point.y,
          fill: this.color,
          scaleY: 0.05,
          scaleX: 0.05
          // stroke: this.color,
          // strokeWidth: 2 // 边框大小
          // width: 32, 
          // height: 32 
        });
        this.canvas.add(drink);
        this.canvas.calcOffset();
        this.canvas.renderAll();
      })
    },
    // 画半圆
    addSemicircle (isFill) {
      let svgUrl = 'semicircle5'
      if (isFill) {
        svgUrl = 'semicircle2'
      }
      fabric.loadSVGFromURL(require(`../assets/svg/${svgUrl}.svg`), (objects, options) => {
        let semic = fabric.util.groupSVGElements(objects, options);
        let point = this.transformPoint(180, 150)
        let obj = {
          left: point.x,
          top: point.y,
          fill: this.color,
          scaleY: 0.05,
          scaleX: 0.05,
          stroke: this.color
        }
        if (isFill){
          delete obj.stroke
        }else{
          delete obj.fill
        }
        semic.set(obj);
        this.canvas.add(semic);
        this.canvas.calcOffset();
        this.canvas.renderAll();
      })
    },

    // 画六边形
    addPol (isFill) {
      let fillColor = 'transparent'
      if (isFill) {
        fillColor = this.color
      }
      let point = this.transformPoint(150, 150)
      let pol = new fabric.Polygon([
        { x: 60, y: 20 },
        { x: 100, y: 40 },
        { x: 100, y: 80 },
        { x: 60, y: 100 },
        { x: 20, y: 80 },
        { x: 20, y: 40 },
      ], {
        left: point.x,
        top: point.y,
        angle: 0,
        stroke: this.color, // 边框原色
        strokeWidth: 2, // 边框大小
        fill: fillColor
      }
      );
      this.canvas.add(pol);
    },
    // 坐标转换 (要画的点)
    transformPoint (x, y) {
      // x = 150, y = 150
      let pt = this.canvas._previousPointer
      console.log('this.zoom >>>>', this.zoom, pt, pt)
      if (!pt) {
        return {
          x: this.mouseTo.x,
          y: this.mouseTo.y
        }
      }
      return {
        x: this.mouseTo.x - (this.canvasTo.x / this.zoom),
        y: this.mouseTo.y - (this.canvasTo.y / this.zoom)
      }
      // let pt = this.canvas._previousPointer
      // if (!pt) {
      //   return {
      //     x: x,
      //     y: y
      //   }
      // }
      // // return { x: ((x / this.zoom) + pt.x), y: ((y / this.zoom) + pt.y) }
      // return { x: (x + pt.x) / this.zoom, y: (y + pt.y) / this.zoom }
    },
    // 坐标转换
    transformMouse (mouseX, mouseY) {
      return { x: mouseX / this.zoom, y: mouseY / this.zoom };
    },
    setZoom () {
      if (!this.canvas) {
        return
      }
      let zoom = 1;
      let eleHeight = window.global.innerHeight * 0.86,
        eleWidth = window.global.innerWidth * 0.885 * 0.78,
        cHeight = this.canvas.height,
        cWidth = this.canvas.width;
      console.log('-----eleHeight---eleWidth----------', eleHeight, eleWidth, cHeight, cWidth)

      let height = eleHeight > cHeight ? eleHeight : cHeight;
      let width = eleWidth > cWidth ? eleWidth : cWidth;
      //横版
      width = eleWidth;
      height = eleHeight;
      let wz = (width / this.init.width)
      let hz = (eleHeight / this.init.height)
      zoom = wz > hz ? hz : wz
      this.canvas.setZoom(zoom);
      this.canvas.setWidth(width);
      this.canvas.setHeight(height);
      this.zoom = zoom;
      this.canvas.renderAll();
    },
    // 添加点数
    addPoint (num) {
      fabric.Image.fromURL(require(`../assets/imgs/common/point/${num}.png`), (oImg) => {
        // scale image down, and flip it, before adding it onto canvas set('flipX', true)
        let point = this.transformPoint(150, 150)
        oImg.scale(0.05).set({
          left: point.x,
          top: point.y,
        })
        this.canvas.add(oImg)
      })
    },
    // 添加点数
    addNumer (num) {
      fabric.Image.fromURL(require(`../assets/imgs/common/num/${num}.png`), (oImg) => {
        // scale image down, and flip it, before adding it onto canvas
        let point = this.transformPoint(150, 150)
        oImg.scale(0.05).set({
          left: point.x,
          top: point.y,
        })
        this.canvas.add(oImg)
      })
    },
    stopAll () {
      // this.canvas.selectable = false;
      // this.canvas.selection = false;
      // this.canvas.skipTargetFind = true;
      if (this.canvas) {
        this.canvas.selection = false;
        this.canvas.skipTargetFind = false;
        this.canvas.selectable = false;
        this.stopDrawListen()
        this.stopClearListen()
        
      }
    },
    // 禁止图形选择编辑
    disSelectAll () {
      if (this.canvas) {
        let drawObjects = this.canvas.getObjects();
        if (drawObjects.length > 0) {
          drawObjects.map((item) => {
            item.set("selectable", false);
          });
        }
      }
    },
    // 允许所有图形可以选择
    allowSelectAll () {
      if (this.canvas) {
        let drawObjects = this.canvas.getObjects();
        if (drawObjects.length > 0) {
          drawObjects.map((item) => {
            item.set("selectable", true);
          });
        }
      }
    },
    // 橡皮擦
    clear () {
      // this.startClearListen()
      // this.canvas.isDrawingMode = false;
      // this.canvas.selection = true;
      // this.canvas.skipTargetFind = false;
      // this.canvas.selectable = true;

      // 选择任何工具前进行一些重置工作
      // 禁用画笔模式
      this.canvas.skipTargetFind = false;
      // this.canvas.isDrawingMode = false;
      // 禁止图形选择编辑
      this.disSelectAll()
      this.canvas.freeDrawingBrush = new fabric.EraserBrush(this.canvas);
      this.canvas.freeDrawingBrush.width = parseInt(this.lineWidth, 10);
      this.canvas.isDrawingMode = true;

    },
    getEventPrefix: function () {
      return window.pointerType ? 'pointer' : 'mouse';
    },
    stopDrawListen () {
      this.canvas.isDrawingMode = false;
      this.drag = false

      try {
        // this.canvas.off("mouse:down")
        // this.canvas.off("mouse:up")
        // this.canvas.off("mouse:move")
        let canvasPd = document.querySelector('#canvaspd')
        canvasPd.onpointerup = null
        canvasPd.onpointerdown = null
        canvasPd.onpointermove = null
      } catch (error) {
        console.log('error: ', error)
      }

    },
    startDrawListen () {

      let canvasPd = document.querySelector('#canvaspd')

      // this.canvas.on("mouse:down", (options) => {
        // var xy = this.transformMouse(options.e.offsetX, options.e.offsetY);
        // this.mouseFrom.x = xy.x;
        // this.mouseFrom.y = xy.y;
        // this.doDrawing = true;
      // });

      // this.canvas.on("mouse:up", (options) => {
      //   var xy = this.transformMouse(options.e.offsetX, options.e.offsetY);
      //   this.mouseTo.x = xy.x;
      //   this.mouseTo.y = xy.y;
      //   // this.moveCount = 1;
      //   // this.doDrawing = false;
      //   if (this.drawObj.type !== 'line') {
      //     this.drawing()
      //     this.stopDrawListen()
      //   }
      // });

      canvasPd.onpointerup = (e) => {
        var xy = this.transformMouse(e.offsetX, e.offsetY);
        this.mouseTo.x = xy.x;
        this.mouseTo.y = xy.y;
        // this.moveCount = 1;
        // this.doDrawing = false;
        if (this.drawObj.type !== 'line') {
          this.drawing()
          this.stopDrawListen()
        }
      }
      // this.canvas.on("mouse:move", (options) => {
      //   // this.moveCount++;
      //   var xy = this.transformMouse(options.e.offsetX, options.e.offsetY);
      //   this.mouseTo.x = xy.x;
      //   this.mouseTo.y = xy.y;
      //   if (this.drawObj.type === 'line') {
      //     this.drawing()
      //   }
      // })
    },
    startTouchMoveListen () {
      let canvasPd = document.querySelector('#canvaspd')
      console.log('-----------> ', this.canvas)
      canvasPd.onpointerdown = () => {
        if (this.currentButton === 'isDrag') {
          this.drag = true;
        } else {
          this.drag = false
        }
      }
      canvasPd.onpointerup = (e) => {
        var xy = this.transformMouse(e.offsetX, e.offsetY);
        this.mouseTo.x = xy.x;
        this.mouseTo.y = xy.y;
        this.drag = false;
      }
      canvasPd.onpointermove = (e) => {
        if (this.drag) {
          if (e.movementX || e.movementY) {
            let oldZoom = this.canvasTo.zoom || this.zoom

            let bgWidth = this.canvas.width - 883.6 * this.zoom
            let bgHeight = this.canvas.height - 621 * this.zoom

            let preX = (this.canvasTo.x / oldZoom) * this.zoom + e.movementX
            let preY = (this.canvasTo.y / oldZoom) * this.zoom + e.movementY
            // 限制背景移出画布
            if ((preX > 0 && e.movementX > 0) || (bgWidth > preX && e.movementX < 0)) {
              return false
            }
            if ((preY > 0 && e.movementY > 0) || (bgHeight > preY && e.movementY < 0)) {
              return false
            }
            var delta = new fabric.Point(e.movementX, e.movementY);
            this.canvas.relativePan(delta);

            this.canvasTo = {
              x: (this.canvasTo.x / oldZoom) * this.zoom + e.movementX,
              y: (this.canvasTo.y / oldZoom) * this.zoom + e.movementY,
              zoom: this.zoom
            }
          };
        }
      }
    },
    startMounListen () {
      this.canvas.on("mouse:down", () => {
        if (this.currentButton === 'isDrag') {
          this.drag = true;
        } else {
          this.drag = false
        }
      })
      this.canvas.on("mouse:up", (options) => {
        var xy = this.transformMouse(options.e.offsetX, options.e.offsetY);
        this.mouseTo.x = xy.x;
        this.mouseTo.y = xy.y;
        this.drag = false;
      })
      this.canvas.on("mouse:move", (options) => {
        let e = options.e
        console.log('------------------> e.movementX', e.movementX, bgWidth, preX)
        if (this.drag) {
          if (e.movementX || e.movementY) {
            let oldZoom = this.canvasTo.zoom || this.zoom
            let bgWidth = this.canvas.width - this.canvas.width * this.zoom
            let bgHeight = this.canvas.height - this.canvas.height * this.zoom

            let preX = (this.canvasTo.x / oldZoom) * this.zoom + e.movementX
            let preY = (this.canvasTo.y / oldZoom) * this.zoom + e.movementY

            console.log('------------------> e.movementX', e.movementX, bgWidth, preX)
            // 限制背景移出画布
            if ((preX > 0 && e.movementX > 0 ) || (bgWidth > preX && e.movementX < 0)) {
              return false
            }
            if ((preY > 0 && e.movementY > 0) || (bgHeight > preY && e.movementY < 0)) {
              return false
            }

            var delta = new fabric.Point(e.movementX, e.movementY);
            this.canvas.relativePan(delta);

            this.canvasTo = {
              x: (this.canvasTo.x / oldZoom) * this.zoom + e.movementX,
              y: (this.canvasTo.y / oldZoom) * this.zoom + e.movementY,
              zoom: this.zoom
            }
          };
        }
      })
    },
    startMoveListen () {
      this.startTouchMoveListen()
      // this.startMounListen()
    },
    stopClearListen () {
      this.canvas.off("selection:created")
    },
    startClearListen () {
      this.canvas.on("selection:created", (e) => {
        if (e.target._objects) {
          //多选删除
          let etCount = e.target._objects.length;
          for (let etindex = 0; etindex < etCount; etindex++) {
            this.canvas.remove(e.target._objects[etindex]);
          }
        } else {
          //单选删除
          this.canvas.remove(e.target);
        }
        this.canvas.discardActiveObject(); //清楚选中框
      });
    },
    // 销毁
    dispose () {
      // this.stopAll()
      if (this.canvas) {
        this.canvas.clear()
        this.canvas.dispose()
        this.canvas = null
        this.isShowCanvas = false
      }
    },
   
    // 画图形
    optChart (num) {
      switch (num) {
        case 1:
          this.optHandler('triangle')
          break
        case 2:
          this.optHandler('rightAngle')
          break
        case 3:
          this.optHandler('rect')
          break
        case 4:
          this.optHandler('rectAngle')
          break
        case 5:
          this.optHandler('quadrilateral')
          break
        case 6:
          this.optHandler('isoTrapezoid')
          break
        case 7:
          this.optHandler('rightTrapezoid')
          break
        case 8:
          this.optHandler('fiveSide')
          break
        case 9:
          this.optHandler('pol')
          break
        case 10:
          this.optHandler('semicircle')
          break
        case 11:
          this.optHandler('circle')
          break
        case 12:
          this.optHandler('ellipse')
          break
        case 13:
          this.optHandler('pentagon')
          break
        case 14:
          this.optHandler('heart')
          break
      }
    },
    optHandler (type, param) {
      // 如果是销毁并且canvas不存在
      if (!(type == 'dispose' && !this.canvas)) {
        this.isShowCanvas = true
        this.$nextTick(() => {
          this.initCanvas()
          this.stopAll()
          this.doOptHandler(type, param)
        })
      } else {
        this.$nextTick(() => {
          this.doOptHandler(type, param)
        })
      }

    },
    drawing () {
      console.log('this.drawObj.type>>> ', this.drawObj)
      switch (this.drawObj.type) {

        // case 'line':
        //   this.addLine()
        //   break;
        case 'triangle':
          // 等边三角形
          this.addTriangle(this.chartBg === 2)
          break;
        case 'rightAngle':
          // 画直角三角形
          this.addRightAngle(this.chartBg === 2)
          break;
        case 'rectAngle':
          // 长方形
          this.addRectAngle(this.chartBg === 2)
          break;
        case 'rect':
          // 正方形
          this.addRect(this.chartBg === 2);
          break;
        case 'circle':
          // 圆
          this.addCircle(this.chartBg === 2)
          break;
        case 'fiveSide':
          // 五角星
          this.addFiveSide(this.chartBg === 2)
          break;
        case 'ellipse':
          // 椭圆
          this.addEllipse(this.chartBg === 2);
          break;
        case 'quadrilateral':
          // 四边形
          this.addQuadrilateral(this.chartBg === 2);
          break;
        case 'isoTrapezoid':
          this.addIsoTrapezoid(this.chartBg === 2)
          break;
        case 'rightTrapezoid':
          this.addRightTrapezoid(this.chartBg === 2)
          break;
        case 'pentagon':
          // 画五边形
          this.addPentagon(this.chartBg === 2);
          break;
        // case 'dispose':
        //   // 销毁
        //   this.dispose();
        //   break;
        case 'stopAll':
          // 关闭
          this.stopAll()
          break;
        case 'point':
          // 添加色子
          this.addPoint(this.drawObj.param)
          break;
        case 'num':
          // 添加数字
          this.addNumer(this.drawObj.param)
          break;
        case 'heart':
          this.addHeart(this.chartBg === 2)
          break;
        case 'semicircle':
          this.addSemicircle(this.chartBg === 2)
          break;
        case 'pol':
          this.addPol(this.chartBg === 2)
          break;
        default:
          break;
      }
    },
    // 操作事件集
    doOptHandler (type, param) {
      console.log('this.canvas >>', type, this.canvas)
      this.drawObj = {
        type: type,
        param: (param ? param : null)
      }
      if (type === 'clear') {
        this.clear()
        return
      } else if (type === 'line'){
        this.addLine()
      }
      this.startDrawListen()

    },
    fabricUpdateOp () {
      fabric.Canvas.prototype.customiseControls({
        mtr:{
          action:'rotate'
        },
        tl: {
          action: 'scale'
        },
        tr: {
          action: 'remove',
        },
        bl: {
          action: 'scale'
        },
        br: {
          action: 'scale'
        },
      });
      fabric.Object.prototype.hasRotatingPoint = true
      fabric.Object.prototype.rotatingPointOffset = 40
      fabric.Object.prototype.customiseCornerIcons(Object.assign({}, {
        settings: {
          cornerSize: 20,
          cornerShape: 'circle',
          cornerBackgroundColor: 'red',
          cornerPadding: 0,
        },
        mtr:{
          icon: require('../assets/svg/rotate.png')
        },
        tl: {
          icon: require('../assets/svg/3.png')
        },
        tr: {
          icon: require('../assets/svg/del.svg')
        },
        bl: {
          icon: require('../assets/svg/2.png')
        },
        br: {
          icon: require('../assets/svg/3.png')
        },
      }));
    },
    // 初始化画板
    initCanvas () {
      if (!this.canvas) {
        console.log('------no----this.canvas----------------')
        this.fabricUpdateOp()
        this.canvas = new fabric.Canvas('canvas', {
          isDrawingMode: false,
          skipTargetFind: true,
          selectable: false,
          selection: false,
          defaultCursor: '',
          // hoverCursor: '',
          // moveCursor: '',
          freeDrawingCursor: '',
          rotationCursor: '',
        })
        this.setZoom();
        this.resizeFunc = () => {
          console.log('进来了2')
          this.$nextTick(() => {
            this.setZoom();
          })
        }
        window.addEventListener('resize', this.throttle(this.resizeFunc, 400))
        // ipcRenderer.on('master-resize', this.resizeFunc)
      }
    },
    throttle (fn, wait) {
      var timer = null;
      return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(context, args);
            timer = null;
          }, wait)
        }
      }
    },
    setStorage () {
      if (this.canvas) {
        try {
          const json = this.canvas.toJSON()
          localStorage.setItem(this.currentPagesNum + 'cavjson', JSON.stringify(json))
        } catch (error) {
          console.log('error--->', error)
        }
      }
    },
    clearStorage() {
      try {
        localStorage.clear();
        this.clearAllCanvas()
      } catch (error) {
        console.log('remove-->', error)
      }
    },
    reRenderCanvas () {
      try {
        console.log('--------------> ', this.currentPagesNum + 'cavjson')
        let json = localStorage.getItem(this.currentPagesNum + 'cavjson')
        if (json) {
          json = JSON.parse(json)
          if (!this.canvas) {
            // 如果不存在
            this.isShowCanvas = true
            this.$nextTick(()=>{
              this.initCanvas()
              this.canvas.loadFromJSON(json).renderAll();
            })
          } else {
            this.canvas.loadFromJSON(json).renderAll();
          }
        }
      } catch (error) {
        console.log('error>>> ', error)
      }
    },
    clearAllCanvas() {
      if (this.canvas) {
        this.canvas.clear()
        // this.canvas.loadFromJSON({}).renderAll();
      }
    },
  }
}